<template>
  <!-- 添加和修改课时表单 -->
  <el-dialog :visible="dialogVisible" title="添加课时" @close="close()">
    <el-form :model="video" label-width="120px">
      <el-form-item label="课时标题">
        <el-input v-model="video.title" />
      </el-form-item>
      <el-form-item label="课时排序">
        <el-input-number v-model="video.sort" :min="0" />
      </el-form-item>
      <el-form-item label="是否免费">
        <el-radio-group v-model="video.isFree">
          <el-radio :label="0">免费</el-radio>
          <el-radio :label="1">默认</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- 上传视频 -->
      <el-form-item label="上传视频">
        <el-upload class="upload-demo" ref="upload" action="#" :http-request="uploadVideo" :limit="1"
          :file-list="fileList" :on-remove="handleOnRemove" :on-change="handleChange" :auto-upload="false">
          <el-button slot="trigger" size="small" type="primary">选取视频</el-button>
          <el-button style="margin-left: 40px;" size="small" type="success" @click="submitUpload">点击上传</el-button>
          <el-progress class="progress" :text-inside="true" :stroke-width="18" :percentage="progress"
            status="exception"></el-progress>
          <div slot="tip" class="el-upload__tip">建议上传mp4文件，且不超过500M</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close()">取 消</el-button>
      <el-button type="primary" @click="saveOrUpdate()">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import videoApi from '@/api/vod/video'
import vodApi from '@/api/vod/vod'
import TcVod from 'vod-js-sdk-v6'
export default {
  data() {
    return {
      BASE_API: 'http://localhost:8301',
      dialogVisible: false,
      video: {
        sort: 0,
        free: false
      },
      uploadBtnDisabled: false,
      fileList: [], // 上传文件列表
      msg: "", //签名
      videoURL: '',// 上传成功后的地址
      progress: 0,// 进度条百分比
    }
  },
  mounted() {
    this.getSignature();
  },
  methods: {
    //获得签名
    getSignature() {
      vodApi.getSign().then(resp => {
        this.msg = resp.data
      })
    },
    open(chapterId, videoId) {
      this.dialogVisible = true
      this.video.chapterId = chapterId
      if (videoId) {
        videoApi.getById(videoId).then(response => {
          this.video = response.data
          // TODO 回显有问题
          if (this.video.videoOriginalName) {
            this.fileList = [{ 'name': this.video.videoOriginalName }]
            console.log(this.fileList[0]);
          }
        })
      }
    },
    close() {
      this.dialogVisible = false
      // 重置表单
      this.resetForm()
    },
    resetForm() {
      this.video = {
        sort: 0,
        free: false
      }
      this.fileList = [] // 重置视频上传列表
    },
    saveOrUpdate() {
      if (!this.video.id) {
        this.save()
      } else {
        this.update()
      }
    },
    save() {
      this.video.courseId = this.$parent.$parent.courseId
      videoApi.save(this.video).then(response => {
        this.$message.success(response.message)
        // 关闭组件
        this.close()
        // 刷新列表
        this.$parent.fetchNodeList()
      })
    },
    update() {
      videoApi.updateById(this.video).then(response => {
        this.$message.success(response.message)
        // 关闭组件
        this.close()
        // 刷新列表
        this.$parent.fetchNodeList()
      })
    },

    // 文件列表改变时 将文件列表保存到本地
    handleChange(file, fileList) {
      this.fileList = fileList
    },
    // 点击上传时
    submitUpload() {
      if (this.fileList.length < 1) return this.$alert('请先选取视频，再进行上传', '提示')
      this.uploadVideo()
    },
    // 自定义上传
    uploadVideo(e) {
      let that = this;
      //console.log(this.fileList[0].raw)
      if (this.fileList.length < 1) {
        window.alert('您还没有选取文件')
      } else {
        //必须以函数的形式返回 sdk参数限制
        const getSignature = async () => {
          const data = that.msg;
          //console.log(this.msg)
          return data
        }
        // //console.log(this.msg)
        const tcVod = new TcVod({
          getSignature: getSignature // 获取上传签名的函数
        })
        // 获取通过elementui上传到本地的文件 因为参数类型必须为file 不能直接以对象的形式传输
        const mediaFile = this.fileList[0].raw
        const uploader = tcVod.upload({
          mediaFile: mediaFile
        })
        // 监听上传进度
        uploader.on('media_progress', info => {
          this.progress = parseInt(info.percent * 100)
        })
        // 上传结束时，将url存到本地
        uploader.done().then(doneResult => {
          this.fileId = doneResult.fileId
          this.video.videoSourceId = doneResult.fileId
          this.video.videoOriginalName = this.fileList[0].raw.name
        })
      }
    },
    // 执行视频文件的删除
    handleOnRemove(file, fileList) {
      if (!this.video.videoSourceId) {
        return
      }
      vodApi.removeByVodId(this.video.videoSourceId).then(response => {
        this.video.videoSourceId = ''
        this.video.videoOriginalName = ''
        videoApi.updateById(this.video)
        this.$message.success(response.message)
      })
    }
  }
}
</script>